<template lang="jade">
.container
  .row.clearfix
    .col-md-12.column
  | &#x9;
  .row.clearfix
    .col-md-6.column
      .page-header
        h1
          | {{ banner }} 
      | &#x9;&#x9;&#x9;
      form(role='form')
        .form-group
          label(for='userName') 用户名
          input#userName.form-control(type='text')
        | &#x9;&#x9;&#x9;&#x9;
        .form-group
          label(for='password') 密码
          input#password.form-control(type='password',v-model="password")
          span.error(v-if="passwordValid") 密码必须是5-15位
        | &#x9;&#x9;&#x9;&#x9;
        .form-group
          label(for='pass_again') 确认密码
          input#pass_again.form-control(type='password',v-model="passagain")
          span.error(v-if="passIsAgin") 两次密码不一致
        | &#x9;&#x9;&#x9;&#x9;
        .form-group
          label(for='exampleInputFile') File input
          input#exampleInputFile(type='file')
          | &#x9;&#x9;&#x9;&#x9;&#x9;
          p.help-block
            | Example block-level help text here.
        | &#x9;&#x9;&#x9;&#x9;
        .checkbox
          label
            input(type='checkbox')
            | Check me out
        |  
        button.btn.btn-default(type='submit') Submit
    | &#x9;&#x9;
    .col-md-6.column
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      banner: '欢迎注册',
      password: '',
      passagain: '',
    }
  },
  computed: {
      passwordValid: function(){
        return !/^\w{5,15}$/.test(this.password);
      },
      passIsAgin: function(){
        return this.password!=this.passagain;
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">

.error{
  color: red;
}

</style>
